<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./flexible.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./index.css"/>
	</head>
	<body>
		<div class="animate-tabbar">
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__icon" viewBox="0 0 80 80">
					 <path class="main__home" d="m22.121,68.704a6.081,6.081 0 0 1 -6.072,-6.073l0,-26.706l-2.849,0a2.021,2.021 0 0 1 -2.821,-0.476a2.015,2.015 0 0 1 0.475,-2.821l28.348,-20.253a2.027,2.027 0 0 1 2.352,0l28.347,20.25a2.022,2.022 0 0 1 0.476,2.821a2.049,2.049 0 0 1 -1.655,0.85a2.013,2.013 0 0 1 -1.179,-0.38l-2.856,0l0,26.712c0.006,3.341 -0.719,6.073 -4.066,6.073l-38.5,0.003z" />
					 <path class="main__search"  d="m41.02179,57.25263l0,0c-3.637,-0.337 -13.049,-2.06 -11.93,-12.134c1.13,-10.095 11.93,-9.091 11.93,-9.091s9.554,0.832 9.452,9.091s-7.439,8.667 -2.752,12.134s5.492,4.05 5.492,4.05" />
					 <path class="animate-tabbar__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z"/>
					 <circle class="animate-tabbar__circle" cx="7" cy="59.5" r='3' ></circle>
				</svg>
				<p class="animate-tabbar__text">首页</p>
			</div>
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__icon" viewBox="0 0 80 80">
					 <path class="cate__default" d="M38,57a6.007,6.007,0,0,1-6-6V38a6.006,6.006,0,0,1,6-6H51a6.007,6.007,0,0,1,6,6V51a6.007,6.007,0,0,1-6,6Zm0-6H51V38H38ZM4,57a4,4,0,0,1-4-4V35a4,4,0,0,1,4-4H22a4,4,0,0,1,4,4V53a4,4,0,0,1-4,4ZM35,26a4,4,0,0,1-4-4V4a4,4,0,0,1,4-4H53a4,4,0,0,1,4,4V22a4,4,0,0,1-4,4ZM4,26a4,4,0,0,1-4-4V4A4,4,0,0,1,4,0H22a4,4,0,0,1,4,4V22a4,4,0,0,1-4,4Z" transform="translate(13 11)" fill="#9e9e9e"/>
					 <circle class="cate__circle--out" cx="40" cy="40" r="26" stroke-width="5" fill="none"></circle>
					 <circle class="cate__circle--inner" cx="40" cy="40" r="12" ></circle>
					 <path class="animate-tabbar__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z" />
					 <circle class="animate-tabbar__circle" cx="7" cy="59.5" r='3'></circle>
				</svg>
				<p class="animate-tabbar__text">分类</p>
			</div>
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__icon" viewBox="0 0 80 80">
					<path class="found__bg" d="M8,0H42a8,8,0,0,1,8,8V49a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8V8A8,8,0,0,1,8,0Z" transform="translate(16 11)" fill="rgb(91, 91, 91)"/>
					<path class="found__bg--light" d="M8,0H42a8,8,0,0,1,8,8V49a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8V8A8,8,0,0,1,8,0Z" transform="translate(16 11)" fill="rgb(210,210,210)"/>
					<path class="found__line01" d="M0,0H18" transform="translate(30.5 29.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="6"/>
					<path class="found__line02" d="M0,0H11" transform="translate(30.5 41.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="6"/>
					<path class="found__line03" d="M195.023,68V52.047h20.671" transform="translate(-150)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="6"/>
					<path class="animate-tabbar__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z" fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="rgb(253,96,0)"/>
					<circle class="animate-tabbar__circle" cx="7" cy="59.5" r='3' fill="rgb(108,99,255)"></circle>
				</svg>
				<p class="animate-tabbar__text">发现</p>
			</div>
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__icon" viewBox="0 0 80 80">
					<path class="study__bg" d="M0,0H41A10,10,0,0,1,51,10V47A10,10,0,0,1,41,57H0a0,0,0,0,1,0,0V0A0,0,0,0,1,0,0Z" transform="translate(14 11)" />
					<path class="study__xline" d="M321.757,54.508h28.483" transform="translate(-296)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="6"/>
					<path class="study__play" d="M9.142,7.747a5,5,0,0,1,8.716,0l4.951,8.8A5,5,0,0,1,18.451,24h-9.9a5,5,0,0,1-4.358-7.451Z" transform="translate(19.224 27.175) rotate(-30)" fill="#fff"/>
					<path class="study__play--hide" d="M9.142,7.747a5,5,0,0,1,8.716,0l4.951,8.8A5,5,0,0,1,18.451,24h-9.9a5,5,0,0,1-4.358-7.451Z" transform="translate(19.224 27.175) rotate(-30)" fill="#fff"/> 
					<path class="animate-tabbar__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z" fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="rgb(253,96,0)"/>
					<circle class="animate-tabbar__circle" cx="7" cy="59.5" r='3' fill="rgb(108,99,255)"></circle>
				</svg>
				<p class="animate-tabbar__text">我的学习</p>
			</div>
			<div class="animate-tabbar__item">
				<svg class="animate-tabbar__icon" viewBox="0 0 80 80">
					<g class="me__bodygroup">
						<circle class="me__head"  cx="18" cy="18" r="18" transform="translate(22 8)" fill="rgb(210, 210, 210)"/>
						<path class="me__body" d="M-443,24v-.019q-.248.019-.5.019a6.5,6.5,0,0,1-6.5-6.5,6.483,6.483,0,0,1,.5-2.5h-.256a19.17,19.17,0,0,1,4.138-6,27.061,27.061,0,0,1,6.527-4.75A38.741,38.741,0,0,1-421,0a38.735,38.735,0,0,1,18.092,4.247A27.068,27.068,0,0,1-396.38,9a19.158,19.158,0,0,1,4.137,6h-.255a6.483,6.483,0,0,1,.5,2.5,6.5,6.5,0,0,1-6,6.481V24Zm38.5-9h0Z" transform="translate(461 44)" fill="rgb(210, 210, 210)" />
					</g>
					<ellipse class="me__eye01"  cx="30" cy="24" rx="3" ry="5" fill="#fff"/>
					<ellipse class="me__eye02"  cx="43" cy="24" rx="3" ry="5" fill="#fff"/>
					<path class="me__mouth" d="M483,38.276a13.225,13.225,0,0,0,13.985,0" transform="translate(-449 -4)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="4"/>
					<path class="animate-tabbar__star" d="m67.75573,18.03858l2.81889,0l0,-2.81889l2.89164,0l0,2.81889l2.81889,0l0,2.89164l-2.81889,0l0,2.81889l-2.89164,0l0,-2.81889l-2.81889,0l0,-2.89164z" fill-opacity="null" stroke-opacity="null" stroke-width="null" stroke="null" fill="rgb(253,96,0)"/>
					<circle class="animate-tabbar__circle" cx="7" cy="59.5" r='3' fill="rgb(108,99,255)"></circle>
				</svg>
				<p class="animate-tabbar__text">账号</p>
			</div>
			
		</div>
		<script type="text/javascript">
			var path = document.querySelector('.me__mouth');
			var length = path.getTotalLength();
			// alert(length)
			// 15
			var tabbarItem = document.querySelectorAll('.animate-tabbar__item');
			tabbarItem.forEach(item=>{
				item.addEventListener('click',function(e){
					tabbarItem.forEach(item=>{
						item.classList.remove('is-active')
					})
					this.classList.add('is-active')
				})
			})
			
		</script>
	</body>
</html>
